<script setup>
	import {
		ref,
		reactive,
		toRefs,
		defineEmits,
	} from 'vue'
	import {
		Search
	} from '@element-plus/icons-vue'

	const props = defineProps({
		show: {
			type: Boolean,
			required: true,
			default: true
		}
	})
	const emits = defineEmits(['update:show', 'submit'])
	// let {
	// 	submit
	// } = toRefs(props)



	const codeStatus = ref(false)
	const maxSecond = ref(60)
	const codeContent = ref('发送验证码')
	const dialogVisible2 = ref(false)
	const code = ref()
	const getCode = () => {
		codeStatus.value = true;
		let interval = setInterval(() => {
			if (maxSecond.value === 0) {
				codeContent.value = '发送验证码'
				maxSecond.value = 60;
				codeStatus.value = false
				clearInterval(interval)
			} else {
				maxSecond.value--;
				codeContent.value = `重新发送${maxSecond.value}`
			}
		}, 1000);
	}

	const onSubmit = () => {
		emits('submit')
	}

	const handleClose = () => {
		emits('update:show', false)
	}
</script>
<template>
	<div>
		<el-dialog :modelValue="show" title="安全验证" width="500" @close="handleClose">
			<div class="verify-form">
				<div class="form-item">
					为了保护您的账户安全，请通过安全验证
				</div>
				<div class="form-item">
					<span class="form-item__label">已绑定的手机号：</span>
					<span class="mobile">176****1247</span>
					<span class="question" @click="dialogVisible2 = true">遇到问题？</span>
				</div>
				<div class="form-item">
					<span class="form-item__label">短信验证码：</span>
					<el-input link v-model="code" placeholder="请输入验证码"
						style="width: 130px;margin-right: 10px;"></el-input>
					<el-button @click="getCode" :disabled="codeStatus">{{codeContent}}</el-button>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="warning" @click="onSubmit">
						确 定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="联系我们" width="500">
			<div class="contact-content">
				<p>
					扫描右侧二维码联系在线客服，或拨打客服热线 18922836153 <br>
					工作时间:周一至周五 8:00-18:00
				</p>
				<img src="../../../assets/img/code.png" alt="" />
			</div>
			<div class="contact-foot">
				<el-button type="warning" @click="dialogVisible2 = false">
					确 定
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<style scoped lang="scss">
	.verify-form .form-item {
		display: flex;
		align-items: center;
		line-height: 32px;
		margin-bottom: 8px;
	}

	.form-item__label {
		width: 125px;
		padding-right: 10px;
		text-align: right;
	}

	.form-item .question {
		color: rgb(0, 0, 255);
		margin-left: 10px;
		cursor: pointer;
	}

	.form-item .question:hover {
		text-decoration: underline;
	}

	.form-item .el-button.is-disabled {
		background-color: rgb(245, 245, 245);
	}

	.contact-content {
		display: flex;
		align-items: center;
	}

	.contact-content p {
		font-size: 16px;
		margin-right: 20px;
	}

	.contact-content img {
		width: 100px;
		height: 100px;
	}

	.contact-foot {
		text-align: center;
		padding: 20px 0 0;
	}

	.views-btn {
		color: #999;
	}

	.views-btn:hover {
		text-decoration: underline;
	}
</style>